<template>
  <div class="home">
    <p>{{food}}</p>
    <button @click="backHandle('back')">返回上一页</button>
    <button @click="backHandle('push')">跳转到push</button>
    <button @click="backHandle('replace')">跳转到replace</button>
    <button @click="handleUserInfo">获取用户信息</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { getUserInfo } from "@/api/app";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  props: {
    food: {
      type: String,
      default: "apply",
    },
  },
  beforeRouteEnter(to, from, next) {
    // 这里this无法使用因为，页面还没有渲染
    next((vm) => {
      // vm 表示this对象
      console.log(vm);
    });
  },
  beforeRouteLeave(to, from, next) {
    // const leave = confirm("你确认要离开吗？")
    // if(leave) next()
    // else next(flase)
    next();
  },

  methods: {
    backHandle(type) {
      if (type === "back") this.$router.back();
      else if (type === "push") {
        const push = "name";
        this.$router.push({
          path: `/argu/${push}`,
          // name: "Argu",
          // params:{
          //   name:'push'
          // },
          query: {
            id: "101",
          },
        });
      } else if (type === "replace")
        this.$router.replace({
          name: "Child",
        });
    },
    handleUserInfo() {
      getUserInfo({ userId: 1 }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
